<template>
    <div>
        <h2>G6 径向树（compact-box）布局示例</h2>
        <!-- 图渲染容器，id 用于 G6 绑定 -->
        <div id="container" style="width:100%;height:800px;background:#f5f5f5;"></div>
    </div>
</template>
<script setup lang="ts">
import { onMounted } from 'vue';
import { Graph, treeToGraphData } from '@antv/g6';

defineOptions({ name: 'AntvG6Demo12' });

onMounted(() => {
    // 异步获取树形数据
    fetch('https://gw.alipayobjects.com/os/antvdemo/assets/data/algorithm-category.json')
        .then((res) => res.json())
        .then((data) => {
            // 创建 G6 图实例
            const graph = new Graph({
                container: 'container', // 直接用 id 绑定容器
                autoFit: 'view', // 自动适配视图
                data: treeToGraphData(data), // 转换树形数据
                behaviors: ['drag-canvas', 'zoom-canvas', 'drag-element'], // 支持拖拽、缩放、节点拖动
                node: {
                    style: {
                        labelText: (d: any) => d.id, // 节点标签显示 id
                        labelBackground: true, // 显示标签背景
                    },
                    animation: {
                        enter: false, // 关闭节点入场动画
                    },
                },
                layout: {
                    type: 'compact-box', // 紧凑树布局
                    radial: true, // 径向模式
                    direction: 'RL', // 从右到左
                    getId: function getId(d: any) {
                        return d.id;
                    },
                    getHeight: () => 26,
                    getWidth: () => 26,
                    getVGap: () => 20,
                    getHGap: () => 40,
                },
            });
            // 渲染图
            graph.render();
        });
});
</script> 
